<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .box {
            width: 450px;

            margin: 50px;
            display: flex;
            flex-direction: column;

            position: relative;
        }

        .box>.show {
            width: 450px;
            height: 450px;
            border: 1px solid #333;
            position: relative;
        }

        .box>.show>.mask {
            width: 200px;
            height: 200px;
            background-color: yellow;
            opacity: .4;
            position: absolute;
            top: 0px;
            left: 0px;

            display: none;
        }

        .box>.list {
            width: 100%;
            flex: 1;

            display: flex;
            justify-content: flex-start;
            align-items: center;

            box-sizing: border-box;
            padding: 20px;
        }

        .box>.list>p {
            width: 54px;
            height: 54px;
            border: 1px solid #333;
            margin-right: 10px;
        }

        .box>.list>p.active {
            border-color: red;
        }

        .box>.enlarge {
            width: 400px;
            height: 400px;

            position: absolute;
            top: 0;
            left: 101%;

            background: url(./imgs/1.big.jpg) no-repeat;
            background-size: 800px 800px;
            background-position: 0 0;

            display: none;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="show">
            <img src="./imgs/1.jpg" alt="">
            <div class="mask"></div>
        </div>
        <div class="list">
            <p class="active">
                <img src="./imgs/1.small.jpg" showImg="./imgs/1.jpg" enlargeImg="./imgs/1.big.jpg" alt="">
            </p>
            <p>
                <img src="./imgs/2.small.jpg" showImg="./imgs/2.jpg" enlargeImg="./imgs/2.big.jpg" alt="">
            </p>
        </div>
        <div class="enlarge"></div>
    </div>
    <script>
        /* 
        分析需求：1、鼠标移入 遮罩层和 放大图都需要显示，鼠标移除的时候 遮罩层和放大图隐藏
                2、鼠标在移动的时候遮罩层要跟着鼠标动 （鼠标的中间动）（边界问题）
                3、放大图也要按照左边比例来移动
                4、鼠标移到小图上可以切换图片
         */
        let showin = document.querySelector(".show")
        let maskin = document.querySelector(".mask")
        let enlargein = document.querySelector(".enlarge")
        let picture = document.querySelectorAll(".list p")
        let imgin = document.querySelector(".show img")
        let boxin = document.querySelector(".box")
        showin.onmouseenter = () => {
            maskin.style.display = "block"
            enlargein.style.display = "block"
        }
        showin.onmouseleave = () => {
            maskin.style.display = "none"
            enlargein.style.display = "none"
        }
        showin.onmousemove = (e) => {
            let x = e.clientX
            let y = e.clientY

        }
    </script>


</body>

</html>